import { ITouchEvent, Text } from "@tarojs/components";
import { isNumber } from "@tarojs/shared";
import React from "react";
import "@/static/font/iconfont.css";

type ByIconProps = {
  name: string;
  size?: number | string;
  color?: string;
  className?: string;
};

type ByIconEvents = {
  onClick?: (e: ITouchEvent) => void;
};

export default ({
  name,
  size = "inherit",
  color,
  className,
  onClick,
}: ByIconProps & ByIconEvents) => {
  const getStyleSheet = () => {
    return {
      color,
      fontSize: isNumber(size) ? `${size}rpx` : size,
    };
  };

  const styleSheet = getStyleSheet() as React.CSSProperties;

  return (
    <Text
      className={`iconfont weui icon- icon-${name} ${className}`}
      style={styleSheet}
      onClick={onClick}
    />
  );
};
